<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品导入</title>
    <link rel="stylesheet" href="/app/plugin/ky_shouyin/static/layui/css/layui.css">
    <style>
        .main-content {
            padding: 20px;
        }
        .upload-area {
            text-align: center;
            padding: 30px;
            border: 2px dashed #e2e2e2;
            background-color: #fafafa;
            margin-bottom: 20px;
        }
        .upload-area.dragover {
            border-color: #009688;
            background-color: #f5f5f5;
        }
        .upload-tip {
            color: #999;
            margin-top: 10px;
        }
        .error-list {
            margin-top: 20px;
            display: none;
        }
        .error-list .layui-timeline-item {
            padding-bottom: 10px;
        }
        .error-list .layui-timeline-title {
            color: #FF5722;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <div class="upload-area" id="uploadArea">
            <button type="button" class="layui-btn" id="uploadBtn">
                <i class="layui-icon">&#xe67c;</i>选择文件
            </button>
            <button type="button" class="layui-btn layui-btn-normal" id="downloadTemplate">
                <i class="layui-icon">&#xe601;</i>下载模板
            </button>
            <div class="upload-tip">支持拖拽上传，只能上传 Excel 文件</div>
        </div>
        
        <div class="error-list layui-hide">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>导入结果</legend>
            </fieldset>
            <ul class="layui-timeline" id="errorList"></ul>
        </div>
    </div>
    
    <script src="/app/plugin/ky_shouyin/static/layui/layui.js"></script>
    <script>
    layui.use(['upload', 'layer'], function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var $ = layui.$;
        
        // 文件上传
        upload.render({
            elem: '#uploadBtn'
            ,url: '/app/ky_shouyin/admin/goods/import'
            ,accept: 'file'
            ,exts: 'xlsx|xls'
            ,auto: true
            ,field: 'file'
            ,method: 'post'
            ,before: function(obj){
                layer.load();
                $('.error-list').hide();
                $('#errorList').empty();
            }
            ,done: function(res){
                layer.closeAll('loading');
                
                if(res.code === 0){
                    layer.msg(res.msg, {icon: 1});
                    if(parent.layui.table){
                        parent.layui.table.reload('goodsTable');
                    }
                } else {
                    layer.msg(res.msg, {icon: 2});
                    if(res.data && res.data.errors && res.data.errors.length > 0){
                        var html = '';
                        res.data.errors.forEach(function(error){
                            html += '<li class="layui-timeline-item">' +
                                   '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>' +
                                   '<div class="layui-timeline-content layui-text">' +
                                   '<div class="layui-timeline-title">' + error + '</div>' +
                                   '</div></li>';
                        });
                        $('#errorList').html(html);
                        $('.error-list').show();
                    }
                }
            }
            ,error: function(){
                layer.closeAll('loading');
                layer.msg('上传失败，请重试', {icon: 2});
            }
        });
        
        // 下载模板
        $('#downloadTemplate').on('click', function(){
            window.location.href = '/app/ky_shouyin/admin/goods/importTemplate';
        });
        
        // 拖拽上传
        var uploadArea = $('#uploadArea')[0];
        
        uploadArea.addEventListener('dragover', function(e){
            e.preventDefault();
            $(this).addClass('dragover');
        });
        
        uploadArea.addEventListener('dragleave', function(e){
            e.preventDefault();
            $(this).removeClass('dragover');
        });
        
        uploadArea.addEventListener('drop', function(e){
            e.preventDefault();
            $(this).removeClass('dragover');
            
            var files = e.dataTransfer.files;
            if(files.length > 0){
                var file = files[0];
                var ext = file.name.split('.').pop().toLowerCase();
                
                if(['xlsx', 'xls'].indexOf(ext) === -1){
                    layer.msg('只能上传 Excel 文件', {icon: 2});
                    return;
                }
                
                // 创建FormData对象
                var formData = new FormData();
                formData.append('file', file);
                
                // 手动上传
                $.ajax({
                    url: '/app/ky_shouyin/admin/goods/import',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function(){
                        layer.load();
                        $('.error-list').hide();
                        $('#errorList').empty();
                    },
                    success: function(res){
                        layer.closeAll('loading');
                        if(res.code === 0){
                            layer.msg(res.msg, {icon: 1});
                            if(parent.layui.table){
                                parent.layui.table.reload('goodsTable');
                            }
                        } else {
                            layer.msg(res.msg, {icon: 2});
                            if(res.data && res.data.errors && res.data.errors.length > 0){
                                var html = '';
                                res.data.errors.forEach(function(error){
                                    html += '<li class="layui-timeline-item">' +
                                           '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>' +
                                           '<div class="layui-timeline-content layui-text">' +
                                           '<div class="layui-timeline-title">' + error + '</div>' +
                                           '</div></li>';
                                });
                                $('#errorList').html(html);
                                $('.error-list').show();
                            }
                        }
                    },
                    error: function(){
                        layer.closeAll('loading');
                        layer.msg('上传失败，请重试', {icon: 2});
                    }
                });
            }
        });
    });
    </script>
</body>
</html> 